<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<style>
		.main{
			width: 100%;
			 display: flex;
		}
		.first{
			width: 20%;
		}
		.two{
			width: 80%;
		}
	   #dragElement {
			width: 50px;
			height: 50px;
			background-color: red;
			cursor: move;
			position: absolute;
			top: 50px;
			left: 50px;
		}
			
	    
		.dropzone {
		        width: 100px;
		        height: 100px;
		        border: 1px solid black;
		        margin-top: 20px;
		}
		
		.draggable{
			background-color: aqua;
		}
		
	</style>
	<body>
		
			 <div class="dropzone">
			   <div id="draggable" draggable="true" class="draggable">
			     该节点可拖拉
			   </div>
			 </div>
			 <div class="dropzone"></div>
			 <div class="dropzone"></div>
			 <div class="dropzone"></div>
			
			<script>
				// 被拖拉节点
				var dragged;
				
				document.addEventListener('dragstart', function (event) {
				  // 保存被拖拉节点
				  dragged = event.target;
				  // 被拖拉节点的背景色变透明
				  event.target.style.opacity = 0.5;
				}, false);
				
				document.addEventListener('dragend', function (event) {
				  // 被拖拉节点的背景色恢复正常
				  event.target.style.opacity = '';
				}, false);
				
				document.addEventListener('dragover', function (event) {
				  // 防止拖拉效果被重置，允许被拖拉的节点放入目标节点
				  event.preventDefault();
				}, false);
				
				document.addEventListener('dragenter', function (event) {
				  // 目标节点的背景色变紫色
				  // 由于该事件会冒泡，所以要过滤节点
				  if (event.target.className === 'dropzone') {
				    event.target.style.background = 'purple';
				  }
				}, false);
				
				document.addEventListener('dragleave', function( event ) {
				  // 目标节点的背景色恢复原样
				  if (event.target.className === 'dropzone') {
				    event.target.style.background = '';
				  }
				}, false);
				
				document.addEventListener('drop', function( event ) {
				  // 防止事件默认行为（比如某些元素节点上可以打开链接），
				  event.preventDefault();
				  if (event.target.className === 'dropzone') {
				    // 恢复目标节点背景色
				    event.target.style.background = '';
				    // 将被拖拉节点插入目标节点
				    dragged.parentNode.removeChild(dragged);
				    event.target.appendChild( dragged );
				  }
				}, false);
				
			</script>
			
			
		
			
	</body>
</html>